
import type { App, } from 'vue'
import { render, createVNode,ref,reactive } from 'vue'
import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
 
interface DialogOptions {
    price?: number;
    onConfirm?: Function;
    onCancel?: Function;
}
 
export default {
    install: (app: App) => {
        // 添加全局方法 $ftConfirm
        app.config.globalProperties.$ftConfirm = (options: DialogOptions) => {
            const show = ref(true)
            const wrapper = document.createElement('div')
            wrapper.id = 'ft-confirm'; // 创建一个id=ft-confirm的容器
            let vnode = createVNode(SanshuiPaymentPassword); // 创建一个vnode
            const close = () => {
                // 关闭弹窗移除标签
                document.body.removeChild(document.getElementById('ft-confirm') as HTMLDivElement);
            }
            const dialogProps = reactive({
                onConfirm: options.onConfirm,
                onCancel: close,
                price: options.price,
                show: show.value,
            });
            vnode = createVNode(SanshuiPaymentPassword, dialogProps);
            render(vnode, wrapper); // 渲染组件
            document.body.appendChild(wrapper); // 添加到body
        };
    }
}